<template>
  <view class="component-container">
    <swiper
      class="view"
      @change="viewList.current = $event.target!.current"
      :current="viewList.current"
      :duration="200"
    >
      <swiper-item>
        <new-task />
      </swiper-item>
      <swiper-item>
        <wait-picking />
      </swiper-item>
      <swiper-item>
        <wait-delivery />
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NewTask from './new-task/index.vue'
import WaitPicking from './wait-picking/index.vue'
import WaitDelivery from './wait-delivery/index.vue'
import Popup from '@/components/popup/index.vue'

const viewList = ref({
  list: ['新任务', '待取餐', '待派送'],
  current: 0
})

defineExpose({ viewList })
</script>

<style scoped lang="scss">
.component-container {
  position: absolute;
  display: flex;
  width: 100%;
  flex-direction: column;
  inset: 0;

  .view {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
  }
}
</style>
